<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.2.0.js"></script>
		
		<script type="text/javascript">
			$(function(){
/*:first-child	获取每个父元素的第一个子元素*/
				$('li:first-child').css('color','red');
				
/*:last-child	获取每个 父元素的最后一个子元素*/				
				$('li:last-child').css('color','blue');
				
/*:only-child	获取只有一个子元素的元素*/				
				$('li:only-child').css('color','gainsboro');
	
/*:nth-child(even/odd/eq(index))	获取每个自定义子元素（索引值从1开始）*/	
				$('li:nth-child(even)').css('background-color','yellow');
				$('li:nth-child(odd)').css('background-color','greenyellow');
				$('li:nth-child(2)').css('font-size','30px');
				
				/*每个两倍显示*/
				$('li:nth-child(2n)').css('font-weight','bold');
				
				
				
				
			})
		</script>
	</head>
	<body>
		<ul>
			<li>11111111111111</li>
			<li>22222222222222222222</li>
			<li>3333333333333</li>
			<li>4444444444444444444444</li>
			<li>555555555555555555</li>
		</ul>
		
		<ul>
			<li>11111111111111</li>
			<li>22222222222222222222</li>
			<li>3333333333333</li>
			<li>4444444444444444444444</li>
			<li>555555555555555555</li>
		</ul>
		
		<ul>
			<li>11111111111111</li>
		</ul>
	</body>
</html>
